<template>
	<view class="container">
		<!-- 顶部状态栏 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="back-btn" @tap="goBack">
				<text class="back-icon">←</text>
			</view>
			<view class="nav-title">任务中心</view>
			<view class="action-btn" @tap="showHelp">
				<text class="action-icon">?</text>
			</view>
		</view>
		
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-header">
				<image class="user-avatar" src="https://placekitten.com/200/200" mode="aspectFill"></image>
				<view class="user-info">
					<text class="user-name">游客123456</text>
					<view class="user-level">
						<text class="level-text">Lv.5</text>
						<view class="exp-bar">
							<view class="exp-progress" :style="{ width: `${userProgress}%` }"></view>
						</view>
						<text class="exp-text">{{ userExp }}/1000</text>
					</view>
				</view>
			</view>
			
			<view class="user-assets">
				<view class="asset-item">
					<image class="asset-icon" src="/static/images/task/coin.png" mode="aspectFit"></image>
					<text class="asset-value">{{ coins }}</text>
				</view>
				<view class="asset-item">
					<image class="asset-icon" src="/static/images/task/gem.png" mode="aspectFit"></image>
					<text class="asset-value">{{ gems }}</text>
				</view>
				<view class="asset-item">
					<image class="asset-icon" src="/static/images/task/energy.png" mode="aspectFit"></image>
					<text class="asset-value">{{ energy }}/100</text>
				</view>
			</view>
		</view>
		
		<!-- 任务选项卡 -->
		<view class="tab-container">
			<view 
				v-for="(tab, index) in tabs" 
				:key="index"
				class="tab-item"
				:class="{ active: currentTab === index }"
				@tap="switchTab(index)"
			>
				<text class="tab-text">{{ tab }}</text>
			</view>
		</view>
		
		<!-- 每日任务 -->
		<view class="task-list" v-if="currentTab === 0">
			<view class="task-header">
				<text class="task-title">每日任务</text>
				<text class="refresh-time">刷新时间: {{ dailyRefreshTime }}</text>
			</view>
			
			<view 
				v-for="(task, index) in dailyTasks" 
				:key="index"
				class="task-item"
			>
				<view class="task-left">
					<image class="task-icon" :src="task.icon" mode="aspectFit"></image>
					<view class="task-content">
						<text class="task-name">{{ task.name }}</text>
						<view class="task-progress">
							<view class="progress-bar">
								<view class="progress-fill" :style="{ width: `${task.completed * 100 / task.total}%` }"></view>
							</view>
							<text class="progress-text">{{ task.completed }}/{{ task.total }}</text>
						</view>
					</view>
				</view>
				
				<view class="task-right">
					<view class="task-reward">
						<image class="reward-icon" :src="task.rewardIcon" mode="aspectFit"></image>
						<text class="reward-value">x{{ task.rewardValue }}</text>
					</view>
					<button 
						class="task-btn" 
						:class="{ 
							'active': task.completed >= task.total && !task.claimed,
							'disabled': task.completed < task.total || task.claimed
						}"
						@tap="claimReward(task, index, 'daily')"
					>
						{{ getButtonText(task) }}
					</button>
				</view>
			</view>
		</view>
		
		<!-- 每周任务 -->
		<view class="task-list" v-if="currentTab === 1">
			<view class="task-header">
				<text class="task-title">每周任务</text>
				<text class="refresh-time">刷新时间: {{ weeklyRefreshTime }}</text>
			</view>
			
			<view 
				v-for="(task, index) in weeklyTasks" 
				:key="index"
				class="task-item"
			>
				<view class="task-left">
					<image class="task-icon" :src="task.icon" mode="aspectFit"></image>
					<view class="task-content">
						<text class="task-name">{{ task.name }}</text>
						<view class="task-progress">
							<view class="progress-bar">
								<view class="progress-fill" :style="{ width: `${task.completed * 100 / task.total}%` }"></view>
							</view>
							<text class="progress-text">{{ task.completed }}/{{ task.total }}</text>
						</view>
					</view>
				</view>
				
				<view class="task-right">
					<view class="task-reward">
						<image class="reward-icon" :src="task.rewardIcon" mode="aspectFit"></image>
						<text class="reward-value">x{{ task.rewardValue }}</text>
					</view>
					<button 
						class="task-btn" 
						:class="{ 
							'active': task.completed >= task.total && !task.claimed,
							'disabled': task.completed < task.total || task.claimed
						}"
						@tap="claimReward(task, index, 'weekly')"
					>
						{{ getButtonText(task) }}
					</button>
				</view>
			</view>
		</view>
		
		<!-- 成就 -->
		<view class="task-list" v-if="currentTab === 2">
			<view class="task-header">
				<text class="task-title">成就</text>
				<text class="completion-rate">完成率: {{ achievementRate }}%</text>
			</view>
			
			<view 
				v-for="(achievement, index) in achievements" 
				:key="index"
				class="task-item"
				:class="{ 'achievement-locked': achievement.locked }"
			>
				<view class="task-left">
					<image class="task-icon" :src="achievement.icon" mode="aspectFit" :class="{ 'locked-icon': achievement.locked }"></image>
					<view class="task-content">
						<text class="task-name">{{ achievement.locked ? '???' : achievement.name }}</text>
						<view class="task-progress" v-if="!achievement.locked">
							<view class="progress-bar">
								<view class="progress-fill" :style="{ width: `${achievement.completed * 100 / achievement.total}%` }"></view>
							</view>
							<text class="progress-text">{{ achievement.completed }}/{{ achievement.total }}</text>
						</view>
						<text class="locked-text" v-else>需要完成前置成就解锁</text>
					</view>
				</view>
				
				<view class="task-right">
					<view class="task-reward">
						<image class="reward-icon" :src="achievement.rewardIcon" mode="aspectFit"></image>
						<text class="reward-value">x{{ achievement.rewardValue }}</text>
					</view>
					<button 
						class="task-btn" 
						:class="{ 
							'active': !achievement.locked && achievement.completed >= achievement.total && !achievement.claimed,
							'disabled': achievement.locked || achievement.completed < achievement.total || achievement.claimed
						}"
						@tap="claimReward(achievement, index, 'achievement')"
					>
						{{ achievement.locked ? '未解锁' : getButtonText(achievement) }}
					</button>
				</view>
			</view>
		</view>
		
		<!-- 签到奖励弹窗 -->
		<view class="modal" v-if="showRewardModal">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">恭喜获得奖励</text>
					<text class="modal-close" @tap="closeRewardModal">×</text>
				</view>
				
				<view class="reward-detail">
					<image class="reward-image" :src="currentReward.icon" mode="aspectFit"></image>
					<text class="reward-name">{{ currentReward.name }}</text>
					<text class="reward-amount">x{{ currentReward.value }}</text>
				</view>
				
				<button class="collect-btn" @tap="collectReward">领取</button>
			</view>
		</view>
		
		<!-- 帮助弹窗 -->
		<view class="modal" v-if="showHelpModal">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">任务帮助</text>
					<text class="modal-close" @tap="closeHelpModal">×</text>
				</view>
				
				<view class="help-content">
					<text class="help-text">1. 完成每日任务和每周任务可以获得金币、宝石等奖励。</text>
					<text class="help-text">2. 每日任务在每天0点刷新，每周任务在每周一0点刷新。</text>
					<text class="help-text">3. 成就是永久性任务，完成后可获得特殊奖励。</text>
					<text class="help-text">4. 部分成就需要完成前置成就才能解锁。</text>
					<text class="help-text">5. 提高等级可以解锁更多功能和奖励。</text>
				</view>
				
				<button class="got-it-btn" @tap="closeHelpModal">知道了</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0,
			currentTab: 0,
			tabs: ['每日任务', '每周任务', '成就'],
			coins: 1500,
			gems: 25,
			energy: 80,
			userExp: 550,
			dailyRefreshTime: '次日00:00',
			weeklyRefreshTime: '下周一00:00',
			showRewardModal: false,
			showHelpModal: false,
			currentReward: {
				icon: '',
				name: '',
				value: 0
			},
			dailyTasks: [
				{
					id: 1,
					name: '每日登录',
					icon: '/static/images/task/login.png',
					completed: 1,
					total: 1,
					rewardIcon: '/static/images/task/coin.png',
					rewardValue: 100,
					claimed: true
				},
				{
					id: 2,
					name: '完成3次游戏',
					icon: '/static/images/task/game.png',
					completed: 2,
					total: 3,
					rewardIcon: '/static/images/task/coin.png',
					rewardValue: 200,
					claimed: false
				},
				{
					id: 3,
					name: '收集能量',
					icon: '/static/images/task/energy.png',
					completed: 50,
					total: 100,
					rewardIcon: '/static/images/task/gem.png',
					rewardValue: 5,
					claimed: false
				},
				{
					id: 4,
					name: '分享给好友',
					icon: '/static/images/task/share.png',
					completed: 0,
					total: 1,
					rewardIcon: '/static/images/task/gem.png',
					rewardValue: 10,
					claimed: false
				},
				{
					id: 5,
					name: '完成每日任务',
					icon: '/static/images/task/daily.png',
					completed: 1,
					total: 4,
					rewardIcon: '/static/images/task/exp.png',
					rewardValue: 200,
					claimed: false
				}
			],
			weeklyTasks: [
				{
					id: 101,
					name: '累计登录5天',
					icon: '/static/images/task/calendar.png',
					completed: 3,
					total: 5,
					rewardIcon: '/static/images/task/coin.png',
					rewardValue: 500,
					claimed: false
				},
				{
					id: 102,
					name: '完成15次游戏',
					icon: '/static/images/task/games.png',
					completed: 8,
					total: 15,
					rewardIcon: '/static/images/task/gem.png',
					rewardValue: 20,
					claimed: false
				},
				{
					id: 103,
					name: '收集500能量',
					icon: '/static/images/task/energy-plus.png',
					completed: 350,
					total: 500,
					rewardIcon: '/static/images/task/gem.png',
					rewardValue: 30,
					claimed: false
				},
				{
					id: 104,
					name: '完成所有每日任务',
					icon: '/static/images/task/check.png',
					completed: 2,
					total: 3,
					rewardIcon: '/static/images/task/coin.png',
					rewardValue: 1000,
					claimed: false
				}
			],
			achievements: [
				{
					id: 201,
					name: '初来乍到',
					icon: '/static/images/task/achievement1.png',
					completed: 1,
					total: 1,
					rewardIcon: '/static/images/task/medal.png',
					rewardValue: 1,
					claimed: true,
					locked: false
				},
				{
					id: 202,
					name: '游戏达人',
					icon: '/static/images/task/achievement2.png',
					completed: 25,
					total: 100,
					rewardIcon: '/static/images/task/medal.png',
					rewardValue: 1,
					claimed: false,
					locked: false
				},
				{
					id: 203,
					name: '财富积累',
					icon: '/static/images/task/achievement3.png',
					completed: 800,
					total: 5000,
					rewardIcon: '/static/images/task/medal.png',
					rewardValue: 1,
					claimed: false,
					locked: false
				},
				{
					id: 204,
					name: '高级成就',
					icon: '/static/images/task/lock.png',
					completed: 0,
					total: 1,
					rewardIcon: '/static/images/task/medal.png',
					rewardValue: 5,
					claimed: false,
					locked: true
				},
				{
					id: 205,
					name: '终极挑战',
					icon: '/static/images/task/lock.png',
					completed: 0,
					total: 1,
					rewardIcon: '/static/images/task/crown.png',
					rewardValue: 1,
					claimed: false,
					locked: true
				}
			]
		};
	},
	computed: {
		userProgress() {
			return (this.userExp / 1000) * 100;
		},
		achievementRate() {
			const total = this.achievements.length;
			const completed = this.achievements.filter(a => a.claimed).length;
			return Math.round((completed / total) * 100);
		}
	},
	onLoad() {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack();
		},
		
		// 切换任务选项卡
		switchTab(index) {
			this.currentTab = index;
		},
		
		// 获取按钮文本
		getButtonText(task) {
			if (task.claimed) {
				return '已领取';
			} else if (task.completed >= task.total) {
				return '领取';
			} else {
				return '进行中';
			}
		},
		
		// 领取奖励
		claimReward(task, index, type) {
			if (task.completed < task.total || task.claimed || (task.locked && type === 'achievement')) {
				return;
			}
			
			// 设置当前奖励数据
			this.currentReward = {
				icon: task.rewardIcon,
				name: this.getRewardName(task.rewardIcon),
				value: task.rewardValue
			};
			
			// 标记为已领取
			if (type === 'daily') {
				this.dailyTasks[index].claimed = true;
			} else if (type === 'weekly') {
				this.weeklyTasks[index].claimed = true;
			} else if (type === 'achievement') {
				this.achievements[index].claimed = true;
			}
			
			// 显示奖励弹窗
			this.showRewardModal = true;
		},
		
		// 获取奖励名称
		getRewardName(icon) {
			if (icon.includes('coin')) {
				return '金币';
			} else if (icon.includes('gem')) {
				return '宝石';
			} else if (icon.includes('exp')) {
				return '经验值';
			} else if (icon.includes('energy')) {
				return '能量';
			} else if (icon.includes('medal')) {
				return '成就徽章';
			} else if (icon.includes('crown')) {
				return '王者之冠';
			}
			return '奖励';
		},
		
		// 领取奖励
		collectReward() {
			// 添加奖励到用户账户
			if (this.currentReward.name === '金币') {
				this.coins += this.currentReward.value;
			} else if (this.currentReward.name === '宝石') {
				this.gems += this.currentReward.value;
			} else if (this.currentReward.name === '经验值') {
				this.userExp += this.currentReward.value;
				if (this.userExp >= 1000) {
					this.userExp = this.userExp % 1000;
					// 升级逻辑
					uni.showToast({
						title: '恭喜升级!',
						icon: 'success'
					});
				}
			} else if (this.currentReward.name === '能量') {
				this.energy = Math.min(100, this.energy + this.currentReward.value);
			}
			
			// 关闭弹窗
			this.closeRewardModal();
			
			// 显示提示
			uni.showToast({
				title: '领取成功',
				icon: 'success'
			});
		},
		
		// 关闭奖励弹窗
		closeRewardModal() {
			this.showRewardModal = false;
		},
		
		// 显示帮助
		showHelp() {
			this.showHelpModal = true;
		},
		
		// 关闭帮助弹窗
		closeHelpModal() {
			this.showHelpModal = false;
		}
	}
};
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	position: relative;
}

/* 导航栏 */
.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #1a73e8;
	height: 88rpx;
	padding: 0 30rpx;
}

.back-btn, .action-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.back-icon, .action-icon {
	font-size: 40rpx;
	color: #ffffff;
}

.nav-title {
	flex: 1;
	text-align: center;
	font-size: 34rpx;
	font-weight: 600;
	color: #ffffff;
}

/* 用户信息卡片 */
.user-card {
	background-color: #ffffff;
	margin: 30rpx;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.user-header {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}

.user-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	margin-right: 30rpx;
	border: 2rpx solid #e0e0e0;
}

.user-info {
	flex: 1;
}

.user-name {
	font-size: 34rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 15rpx;
}

.user-level {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.level-text {
	font-size: 26rpx;
	color: #1a73e8;
	font-weight: 600;
	background-color: #e8f0fe;
	padding: 4rpx 16rpx;
	border-radius: 20rpx;
	margin-right: 20rpx;
}

.exp-bar {
	flex: 1;
	height: 12rpx;
	background-color: #f0f0f0;
	border-radius: 6rpx;
	margin-right: 20rpx;
	overflow: hidden;
}

.exp-progress {
	height: 100%;
	background-color: #4caf50;
	border-radius: 6rpx;
}

.exp-text {
	font-size: 22rpx;
	color: #999;
}

.user-assets {
	display: flex;
	justify-content: space-around;
	background-color: #f9f9f9;
	border-radius: 16rpx;
	padding: 20rpx 0;
}

.asset-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.asset-icon {
	width: 60rpx;
	height: 60rpx;
	margin-bottom: 10rpx;
}

.asset-value {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

/* 任务选项卡 */
.tab-container {
	display: flex;
	background-color: #ffffff;
	margin: 0 30rpx 30rpx;
	border-radius: 16rpx;
	overflow: hidden;
}

.tab-item {
	flex: 1;
	padding: 20rpx 0;
	text-align: center;
	position: relative;
}

.tab-text {
	font-size: 28rpx;
	color: #666;
}

.tab-item.active {
	background-color: #f0f7ff;
}

.tab-item.active .tab-text {
	color: #1a73e8;
	font-weight: 500;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background-color: #1a73e8;
	border-radius: 2rpx;
}

/* 任务列表 */
.task-list {
	background-color: #ffffff;
	margin: 0 30rpx 30rpx;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.task-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.task-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.refresh-time, .completion-rate {
	font-size: 24rpx;
	color: #999;
}

.task-item {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.task-item:last-child {
	border-bottom: none;
}

.task-left {
	display: flex;
	align-items: center;
	flex: 1;
	margin-right: 20rpx;
}

.task-icon {
	width: 80rpx;
	height: 80rpx;
	margin-right: 20rpx;
}

.task-content {
	flex: 1;
}

.task-name {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 15rpx;
}

.task-progress {
	display: flex;
	align-items: center;
}

.progress-bar {
	flex: 1;
	height: 10rpx;
	background-color: #f0f0f0;
	border-radius: 5rpx;
	overflow: hidden;
	margin-right: 15rpx;
}

.progress-fill {
	height: 100%;
	background-color: #4caf50;
	border-radius: 5rpx;
}

.progress-text {
	font-size: 22rpx;
	color: #999;
}

.task-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
}

.task-reward {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
}

.reward-icon {
	width: 30rpx;
	height: 30rpx;
	margin-right: 8rpx;
}

.reward-value {
	font-size: 26rpx;
	color: #ff9800;
	font-weight: 500;
}

.task-btn {
	width: 120rpx;
	height: 60rpx;
	line-height: 60rpx;
	font-size: 24rpx;
	border-radius: 30rpx;
	background-color: #e0e0e0;
	color: #999;
	margin: 0;
	padding: 0;
}

.task-btn.active {
	background-color: #1a73e8;
	color: #ffffff;
}

.task-btn.disabled {
	background-color: #e0e0e0;
	color: #999;
}

/* 成就相关 */
.achievement-locked {
	opacity: 0.5;
}

.locked-icon {
	filter: grayscale(100%);
}

.locked-text {
	font-size: 22rpx;
	color: #999;
}

/* 弹窗 */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
}

.modal-content {
	width: 80%;
	background-color: #ffffff;
	border-radius: 20rpx;
	overflow: hidden;
	padding-bottom: 40rpx;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	background-color: #f8f8f8;
	border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.modal-close {
	font-size: 36rpx;
	color: #999;
	width: 60rpx;
	height: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 奖励详情 */
.reward-detail {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40rpx 0;
}

.reward-image {
	width: 120rpx;
	height: 120rpx;
	margin-bottom: 20rpx;
}

.reward-name {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 15rpx;
}

.reward-amount {
	font-size: 40rpx;
	color: #ff9800;
	font-weight: 600;
}

.collect-btn, .got-it-btn {
	width: 60%;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	background-color: #1a73e8;
	color: #ffffff;
	font-size: 30rpx;
	margin: 20rpx auto 0;
}

/* 帮助内容 */
.help-content {
	padding: 30rpx;
}

.help-text {
	font-size: 26rpx;
	color: #666;
	line-height: 1.8;
	margin-bottom: 20rpx;
	display: block;
}

.help-text:last-child {
	margin-bottom: 0;
}
</style>